<template>
  <div class="diqu">
    <div class="top_title" :style="{ '--zoom': zoom }">
      {{ changeData.title }}<br />
      <span class="top_title_Small">更新时间：{{ changeData.update_time }}</span>
    </div>
    <el-button class="off" :style="{ '--zoom': zoom }" @click="off">
      退出
    </el-button>
    <el-button v-if="(pid == 1)" :style="{ '--zoom': zoom }" class="off off_new" @click="offNew">
      返回
    </el-button>
    <!-- <el-button class="return" @click="pushome">
      返回首页
    </el-button> -->
    <!-- <el-button class="switch" @click="pushswitch">
      下一屏
    </el-button> -->
    <el-button class="switch " :style="{ '--zoom': zoom }" :class="value ? 'switch_switch1' : 'switch_switch2'"
      @click="switchdata">
      {{ !this.value ? '净增量模式' : '变化量模式' }}
    </el-button>
    <el-button class="Fullscreen" :style="{ '--zoom': zoom }" @click="screen" icon="el-icon-full-screen">
    </el-button>
    <el-row :gutter="20" style="height: 90vh;">
      <el-col :span="6" style="height: 100%;">
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t" @mousemove="LineMousemove1" @mouseleave="LineMouseleave1">
          </div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明公开</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t_z" @mousemove="LineMousemove2"
            @mouseleave="LineMouseleave2"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明授权</div>

        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b_z" @mousemove="LineMousemove3"
            @mouseleave="LineMouseleave3"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">实新授权</div>

        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b" @mousemove="LineMousemove4" @mouseleave="LineMouseleave4">
          </div>
          <div class="left_text" :style="{ '--zoom': zoom }">外观授权</div>
        </div>
      </el-col>
      <el-col :span="11" style="height: 100%;">
        <div class="zho_box_t">
          <div class="change_t">
            <div id="change_t_gauge" class="change_t_gauge"></div>
            <div id="change_t_gauge1" class="change_t_gauge1"></div>
            <div id="change_t_gauge2" class="change_t_gauge2"></div>
            <div class="add_text" :style="{ '--zoom': zoom }">
              <div style="font-size: 12px;">本月新增</div>
              <div style="font-size: 30px;">
                <CountTo style="padding:0" :startVal='0' :endVal='changeData.month_add' :duration='2100' />
              </div>
            </div>

            <div class="gauge_bgc" :style="{ '--zoom': zoom }">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>

          <div class="change_b" :style="{ '--zoom': zoom }">
            <el-row :gutter="10">
              <el-col :span="4" v-for="(item, index) in changeData.list" :key="index">
                <div class="change_b_item">
                  <div class="item_t"><span>本月 {{ item.month_add > 0 ? '+' : '' }}
                      <CountTo style="padding:0" :startVal='0' :endVal='item.month_add' :duration='2100' />
                    </span></div>
                  <div class="item_z">
                    <div class="z_t">
                      <CountTo :startVal='0' :endVal='item.number' :duration='2100' />
                    </div>
                    <div class="z_b" :style="{ '--bgColor': changeTypeBgc[index] }">{{ item.name }}</div>
                  </div>
                  <div class="item_b">
                    <el-row :gutter="6">
                      <el-col :span="12">
                        <div class="one_div">
                          <div>{{ item.prp_name }}</div>
                          <div class="state">
                            <div :class="item.prp_status == 0 ? 'span_typebot' : 'span_typeTop'">
                              <CountTo :startVal='0' :endVal='item.prp_add' :duration='2100' />%
                            </div>
                            <div :class="item.prp_status == 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                                class="iconfont icon-fanhuidingbu "></i></div>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="one_div">
                          <div>{{ item.ratio_name }}</div>
                          <div class="state">
                            <div :class="item.ratio_status == 0 ? 'span_typebot' : 'span_typeTop'">
                              <CountTo :startVal='0' :endVal='item.ratio_add' :duration='2100' />%
                            </div>
                            <div :class="item.ratio_status == 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                                class="iconfont icon-fanhuidingbu "></i></div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="zho_box_b">
          <div id="zho_box_b" class="zho_box_b_bar" @mousemove="HistogramMousemove" @mouseleave="HistogramMouseleave">
          </div>
          <div class="left_text" :style="{ '--zoom': zoom }">专利新增占比态势</div>
        </div>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <div class="right_box_z">
          <div class="left_text" :style="{ '--zoom': zoom }">
            <div class="companyType">
              <div style="margin-right: 5px;">企业分级管理</div>
              <div>
                <el-dropdown trigger="click" @command="handleCommand" v-if="companyTypeName">
                  <span class="el-dropdown-link">
                    {{ companyTypeName }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" :append-to-body="false">
                    <el-dropdown-item :command="item" v-for="item in companyTypeArr" :key="item.type">{{ item.name
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="right_text">
            <span class="text_2" :style="{ '--zoom': zoom }" :class="status == 0 ? 'text_1' : ''"
              @click="dataList(1)">累计数据</span>
            <span style="user-select: none" :style="{ '--zoom': zoom }">|</span>
            <span class="text_2" :style="{ '--zoom': zoom }" :class="status == 1 ? 'text_1' : ''"
              @click="dataList(2)">上月更新</span>
          </div>
          <!-- <div class="right_text" :style="{ '--zoom': zoom }">
            <span class="text_2" :class="topactivation.list == 1 ? 'text_1' : ''"
              @click="switchList('list')">全年TOP30</span>
            <span class="text_2">|</span>
            <span class="text_2" :class="topactivation.month == 1 ? 'text_1' : ''"
              @click="switchList('month')">本月TOP30</span>
            <span class="text_2">|</span>
            <span class="text_2" :class="topactivation.company == 1 ? 'text_1' : ''"
              @click="switchList('company')">优势企业名单</span>
          </div>
          <div class="box_z_item_amin">
            <div class="scroll_box" ref="scroll_box" @mousemove="mousemove" @mouseleave="mouseleave">
              <div class="box_z_item" :style="{ '--zoom': zoom }" :class="item.is_red == 1 ? 'box_z_item_red' : ''"
                v-for="(item, index) in top30List" :key="item.id" @click="goCompany(item)">
                <div>{{ index + 1 > 3 ? index + 1 : 'TOP' + (index + 1) }}</div>
                <div>
                  <span v-if="item.is_important == 1">重点企业</span>
                  <span v-if="item.is_innovate == 1">创新担当</span>
                </div>
                <div :class="item.status == 1 ? 'div_new' : ''">
                  {{ item.company_name ? item.company_name : item.name }}
                  <span v-if="item.is_news == 1">新进企业</span>
                </div>
                <div :class="item.status == 1 ? 'div_new' : ''">{{ item.score }}</div>
              </div>
            </div>
          </div> -->

          <div class="box_z_item_amin">
            <div class="box_z_itemTop" :style="{ '--zoom': zoom }">
              <div>排名</div>
              <div>镇街</div>
              <div>公司</div>
              <!-- <div>排名变化</div> -->
              <div>数量</div>
            </div>
            <div class="scroll_box" ref="scroll_box" @mousemove="mousemove" @mouseleave="mouseleave"
              element-loading-background="#111129" v-loading="loading">
              <div class="box_z_item" :style="{ '--zoom': zoom }" v-for="(item, index) in top100List" :key="index"
                @click="goCompany(item)">
                <div>{{ item.ranking > 3 ? item.ranking : 'TOP' + item.ranking }}</div>
                <div>{{ item.street }}</div>
                <div>{{ item.company }}</div>
                <!-- <div>
                  <div v-if="item.change_rank == 999">
                    新入围
                  </div>
                  <div v-else :class="item.change_rank < 0 ? ' span_typebot' : 'span_typeTop'">
                    <span :style="{ color: item.change_rank == 0 ? '#4B98F7' : '' }">{{ item.change_rank == 0 ? '-' :
                      item.change_rank }}</span>
                    <span v-if="item.change_rank != 0"
                      :class="item.change_rank < 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                        class="iconfont icon-fanhuidingbu "></i></span>
                  </div>
                </div> -->
                <div>{{ item.end }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box_b">
          <div class="left_text" :style="{ '--zoom': zoom }">预警企业</div>
          <div class="right_box_nei_admin">
            <div class="right_box_nei_scroll" ref="right_box_nei_scroll" @mousemove="mousemove1"
              @mouseleave="mouseleave1">
              <div class="right_box_nei" :style="{ '--zoom': zoom }" v-for="(item, index) in maincompany" :key="index"
                @click="goCompany(item)">
                <div>
                  <span v-if="item.is_important == 1">重点企业</span>
                </div>
                <div>{{ item.company_name }}</div>
                <div>
                  <div v-if="item.t1" style="text-align: center;">未入前30</div>
                  <div v-if="item.t2" style="text-align: center;">退出前30</div>
                  <div v-if="item.t3" style="text-align: center;">发明异常</div>
                  <div v-if="item.t4" style="text-align: center;">发明过低</div>
                  <div v-if="item.t5" style="text-align: center;">发明下降</div>
                </div>
                <div class="nei_tooltip" v-if="item.t5 == 1">
                  <div>{{ item.rat_one_title }}：{{ item.rat_one }} </div>
                  <div> {{ item.rat_two_title }}：{{ item.rat_two }} </div>
                  <div> {{ item.rat_three_title }}：{{ item.rat_three }} </div>
                  <div> 预警原因：{{ item.reason }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
import {
  streetcenter,
  streetcenterrat,
  streetgetleftlist,
  streetgetrightlist,
  companyRank
} from "@/api/newuser.js";
export default {
  components: { CountTo },
  data() {
    return {
      pid: '',
      zoom: 1,
      value: false,
      type: 2,
      timer: null,
      timer1: null,
      Linetimer1: null,
      Linetimer2: null,
      Linetimer3: null,
      Linetimer4: null,
      loading: true,
      companyTypeArr: [],
      status: 0,
      companyTypeName: '',
      rankType: 0,
      top100List: [],
      Histogramtimer: null,

      lineList1: {
        data1: [120, 132, 101, 134, 90, 230, 210],
        data2: [220, 182, 191, 234, 290, 330, 310],
        data3: [150, 232, 201, 154, 190, 330, 410],
        data4: [320, 332, 301, 334, 390, 330, 320],
      },
      lineList2: {
        data1: [120, 132, 101, 134, 90, 230, 210],
        data2: [220, 182, 191, 234, 290, 330, 310],
        data3: [150, 232, 201, 154, 190, 330, 410],
        data4: [320, 332, 301, 334, 390, 330, 320],
      },
      lineList3: {
        data1: [150, 232, 201, 154, 190, 330, 410],
        data2: [320, 332, 301, 334, 390, 330, 320],
        data3: [120, 132, 101, 134, 90, 230, 210],
        data4: [220, 182, 191, 234, 290, 330, 310],
      },
      lineList4: {
        data1: [150, 232, 201, 154, 190, 330, 410],
        data2: [320, 332, 301, 334, 390, 330, 320],
        data3: [120, 132, 101, 134, 90, 230, 210],
        data4: [220, 182, 191, 234, 290, 330, 310],
      },


      gauge_objDemoSmall: {
        startAngle: 220,
        endAngle: -40,
        min: 0,
        max: 10,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            opacity: 1,
            width: 5,
          },
        },
        progress: {
          width: 5,//进度条宽度
        },
        axisTick: {
          show: true,
          distance: 0,//刻度小
          splitNumber: 1,//长度
          lineStyle: {
            width: 1,
            color: '#cac9ca'
          }
        },
        splitLine: {
          show: true,
          distance: 0,//刻度大
          length: 2,//长度
          lineStyle: {
            width: 1,
            color: '#cac9ca'
          }
        },
        data: [
          {
            value: 1,
            name: '环比增加',
            title: {
              offsetCenter: ['0%', '-35%'],
              fontSize: 12,//标题文字大小
              color: '#fff'
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ['3%', '15%']
            }
          }
        ],
        detail: {
          // valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 80,
          // offsetCenter: [0, '-15%'],
          fontSize: 24,//数据文字大小
          fontWeight: 'bolder',
          formatter: '{value}%',
          color: '#6bf5f9',
        },
        axisLabel: {
          distance: 10,//文字位置
          color: '#cccecd',
          fontSize: 3  //文字大小
        },
      },
      gauge_obj: {
        startAngle: 225,
        endAngle: -45,
        min: 0,
        max: 24000,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            opacity: 0,
            width: 5,
          },
        },
        progress: {
          width: 15,//进度条宽度
        },
        axisTick: {
          show: true,
          distance: -20,//刻度小
          splitNumber: 10,//长度
          lineStyle: {
            width: 2,
            color: '#00f5f8'
          }
        },
        splitLine: {
          show: true,
          distance: -30,//刻度大
          length: 15,//长度
          lineStyle: {
            width: 3,
            color: '#00f5f8'
          }
        },
        data: [
          {
            value: 20698,
            name: '本镇街有效专利',
            title: {
              offsetCenter: ['0%', '-45%'],
              fontSize: 12,//标题文字大小
              color: '#fff'
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ['3%', '-20%']
            }
          }
        ],
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 80,
          // offsetCenter: [0, '-15%'],
          fontSize: 50,//数据文字大小
          fontWeight: 'bolder',
          formatter: '{value} ',
          color: '#fff',
        },
        axisLabel: {
          distance: 35,//文字位置
          color: '#00f5f8',
          fontSize: 12  //文字大小
        },
      },

      Histogram5: [
      ],
      changeTypeBgc: {
        open: '#006CFF',
        auth: '#6ACCA3',
        news: '#EACF19',
        appear: '#7F6FEC',
        apply: '#FE7C4B',
        trademark: '#FE7C4B',
      },
      changeType: [
        {
          value: '本月 +643',
          Number: {
            num: '51,190',
            bgc: '#006CFF',
            value: '发明公开'
          },
          InDe: [
            {
              value: '同比减少',
              num: '15%',
              type: 'down'
            },
            {
              value: '环比减少',
              num: '15%',
              type: 'top'
            }
          ]
        },
        {
          value: '本月 +540',
          Number: {
            num: '41,040',
            bgc: '#6ACCA3',
            value: '发明授权'
          },
          InDe: [
            {
              value: '同比减少',
              num: '0.6%',
              type: 'down'
            },
            {
              value: '环比减少',
              num: '1.2%',
              type: 'top'
            }
          ]
        },
        {
          value: '本月 +1560',
          Number: {
            num: '109,212',
            bgc: '#EACF19',
            value: '实新授权'
          },
          InDe: [
            {
              value: '同比减少',
              num: '0.1%',
              type: 'top'
            },
            {
              value: '环比减少',
              num: '4%',
              type: 'top'
            }
          ]
        },
        {
          value: '本月 +2641',
          Number: {
            num: '112,126',
            bgc: '#7F6FEC',
            value: '外观授权'
          },
          InDe: [
            {
              value: '同比减少',
              num: '8%',
              type: 'down'
            },
            {
              value: '环比减少',
              num: '3%',
              type: 'down'
            }
          ]
        },
      ],

      top30List: [

      ],
      topList: {},
      topactivation: {
        list: 1,
        month: 0,
        company: 0,
      },
      // dimensions1: ['product', '发明公开', '发明授权', '实新授权', '外观授权','总体占比'],
      dimensions1: ['80月', '9月', '10月', '11月'],
      dimensions2: ['product', '上月数量', '本月数量'],


      changeData: {

      },
      maincompany: [],
      id: null,
      scrollDom: null,
      scrollDomTop: 0,

      scrollDom2: null,
      scrollDomTop2: 0,
    };
  },
  created() {
    this.pid = this.$store.state.user.pid;
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    } else {
      this.id = this.$store.state.user.street_id;
    }
    this.streetcenter()
    this.streetcenterrat()
    this.streetgetleftlist()
    this.streetgetrightlist()
    this.companyRank()
  },
  mounted() {
    // 监听页面滚动
    this.scrollDom = this.$refs.scroll_box;
    this.timer = setInterval(() => {
      this.scrollDomTop = this.scrollDom.scrollTop
      this.scrollDom.scrollTop += 1;
      if (this.scrollDomTop == this.scrollDom.scrollTop) {
        this.scrollDom.scrollTop = 0;
      }
    }, 40);

    this.scrollDom2 = this.$refs.right_box_nei_scroll;
    this.timer1 = setInterval(() => {
      this.scrollDomTop2 = this.scrollDom2.scrollTop
      this.scrollDom2.scrollTop += 1;
      if (this.scrollDomTop2 == this.scrollDom2.scrollTop) {
        this.scrollDom2.scrollTop = 0;
      }
    }, 40);
  },
  methods: {
    handleCommand(command) {
      // console.log(command);
      this.top100List = []
      this.loading = true
      this.rankType = command.type
      this.companyTypeName = command.name
      this.companyRank()
    },
    companyRank() {
      companyRank({
        type: this.rankType,
        status: this.status,
        street_id: this.id,
      }).then(res => {
        this.loading = false
        this.top100List = res.list.splice(0, 30)
        // let demo = this.$refs.scroll_box;
        this.companyTypeArr = res.arr
        if (!this.companyTypeName) {
          this.companyTypeName = res.arr[0].name
        }
        this.scrollDom.scrollTop = 0;
        // console.log(this.top100List);
      })
    },
    goCompany(row) {
      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          company_id: row.id,
          company_name: row.company_name,
        }
      })
    },
    switchdata() {
      this.value = !this.value
      if (this.value) {
        this.type = 1
      } else {
        this.type = 2
      }
      this.streetcenter()
      this.streetcenterrat()
      this.streetgetleftlist()
    },
    LineSetInterval1() {
      // let myChart = echarts.init(document.getElementById('left_box_t'), 'dark');
      // let type = 1
      // this.Linetimer1 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': true,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': true,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': true,
      //           '今年顺德平均': true,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000);
    },
    LineSetInterval2() {
      // let myChart = echarts.init(document.getElementById('left_box_t_z'), 'dark');
      // let type = 1
      // this.Linetimer2 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': true,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': true,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': true,
      //           '今年顺德平均': true,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000);
    },
    LineSetInterval3() {
      // let myChart = echarts.init(document.getElementById('left_box_b_z'), 'dark');
      // let type = 1
      // this.Linetimer3 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': true,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': true,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': true,
      //           '今年顺德平均': true,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000);
    },
    LineSetInterval4() {
      // let myChart = echarts.init(document.getElementById('left_box_b'), 'dark');
      // let type = 1


      // this.Linetimer4 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': true,
      //           '今年顺德平均': false,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': true,
      //           '去年顺德平均': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': false,
      //           '去年本镇街': false,
      //           '今年顺德平均': false,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '今年本镇街': true,
      //           '去年本镇街': true,
      //           '今年顺德平均': true,
      //           '去年顺德平均': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000);
    },


    LineMousemove1() {
      clearInterval(this.Linetimer1);
      this.Linetimer1 = null;
    },
    LineMouseleave1() {
      this.LineSetInterval1()
    },
    LineMousemove2() {
      clearInterval(this.Linetimer2);
      this.Linetimer2 = null;
    },
    LineMouseleave2() {
      this.LineSetInterval2()
    },
    LineMousemove3() {
      clearInterval(this.Linetimer3);
      this.Linetimer3 = null;
    },
    LineMouseleave3() {
      this.LineSetInterval3()
    },
    LineMousemove4() {
      clearInterval(this.Linetimer4);
      this.Linetimer4 = null;
    },
    LineMouseleave4() {
      this.LineSetInterval4()
    },

    HistogramMousemove() {
      clearInterval(this.Histogramtimer);
      this.Histogramtimer = null;
    },
    HistogramMouseleave() {
      let myChart = echarts.init(document.getElementById('zho_box_b'), 'dark');
      let type = 1
      // this.Histogramtimer = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 6) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true,
      //           '总体占比': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },


    mousemove() {
      clearInterval(this.timer);
      this.timer = null;
    },
    mouseleave() {

      this.scrollDom = this.$refs.scroll_box;
      this.timer = setInterval(() => {
        this.scrollDomTop = this.scrollDom.scrollTop
        this.scrollDom.scrollTop += 1;
        if (this.scrollDomTop == this.scrollDom.scrollTop) {
          this.scrollDom.scrollTop = 0;
        }
      }, 40);
    },
    mousemove1() {
      clearInterval(this.timer1);
      this.timer1 = null;
    },
    mouseleave1() {
      this.scrollDom2 = this.$refs.right_box_nei_scroll;
      this.timer1 = setInterval(() => {
        this.scrollDomTop2 = this.scrollDom2.scrollTop
        this.scrollDom2.scrollTop += 1;
        if (this.scrollDomTop2 == this.scrollDom2.scrollTop) {
          this.scrollDom2.scrollTop = 0;
        }
      }, 40);
    },

    off() {
      this.$router.push({
        path: '/newhome'
      })
    },
    offNew() {
      this.$router.push({
        path: '/visualization'
      })
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    async streetcenter() {
      this.changeData = await streetcenter({
        id: this.id,
        type: this.type
      })

      let data = this.gauge_obj
      let data1 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall))
      let data2 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall))

      data.data[0].value = this.changeData.valid_patent

      data1.data[0].value = this.changeData.prp_add
      data1.data[0].name = this.changeData.prp_name

      data2.data[0].value = this.changeData.ratio_add
      data2.data[0].name = this.changeData.ratio_name

      //仪表盘
      let gauge = document.getElementById('change_t_gauge');
      this.gauge(gauge, data,)
      let gauge1 = document.getElementById('change_t_gauge1');
      this.gauge(gauge1, data1)
      let gauge2 = document.getElementById('change_t_gauge2');
      this.gauge(gauge2, data2)
    },
    async streetcenterrat() {
      this.HistogramMousemove()
      let demo = await streetcenterrat({
        id: this.id,
        type: this.type
      })
      this.Histogram5 = demo.open
      let list = demo.list[0].data

      let dimensions = []
      this.Histogram5.map(item => {
        dimensions.push(item.product)
      })

      //柱状图
      let chartDom1 = document.getElementById('zho_box_b');
      this.Histogram(chartDom1, this.Histogram5, dimensions, list);
    },
    async streetgetleftlist() {
      let data = await streetgetleftlist({
        id: this.id,
        type: this.type
      })
      this.LineMousemove1()
      this.LineMousemove2()
      this.LineMousemove3()
      this.LineMousemove4()
      this.lineList1 = data.open
      this.lineList2 = data.auth
      this.lineList3 = data.news
      this.lineList4 = data.apper

      //折线图
      let Line1 = document.getElementById('left_box_t');
      this.Line(Line1, this.lineList1, data.month, 1)

      let Line2 = document.getElementById('left_box_t_z');
      this.Line(Line2, this.lineList2, data.month, 2)

      let Line3 = document.getElementById('left_box_b_z');
      this.Line(Line3, this.lineList3, data.month, 3)

      let Line4 = document.getElementById('left_box_b');
      this.Line(Line4, this.lineList4, data.month, 4)
    },
    async streetgetrightlist() {
      let data = await streetgetrightlist({
        id: this.id
      })
      // this.top30List = data.list
      // this.topList = data

      this.maincompany = data.red
    },

    switchList(type) {
      // console.log(this.topList[type], 'type')
      //循环对象this.topactivation
      for (let i in this.topactivation) {
        // console.log(i, 'i')
        if (i == type) {
          this.topactivation[i] = 1
        } else {
          this.topactivation[i] = 0
        }
      }
      // let demo = this.$refs.scroll_box;
      this.scrollDom.scrollTop = 0;

      // this.top30List = this.topList[type]

    },

    dataList(type) {
      this.top100List = []
      this.loading = true
      this.status = type - 1
      this.companyRank()
      // this.top100List = this.top100List_data[type - 1];
    },
    pushswitch() {
      //路由跳转
      this.$router.push({
        path: '/visualization'
      })
    },
    pushome() {
      //路由跳转
      this.$router.push({
        path: '/visualization'
      })
    },

    Histogram(chartDom, dataList, dimensions, list) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        tooltip: {
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 10,
          },
          backgroundColor: 'rgba(12, 16, 63,.7)',
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let res
            if (datas[0].value.发明公开) {
              res = `
                <div style='color:#026cfe'>
                  发明公开<span style='margin: 0 10px 0 15px'> ${datas[0].value.发明公开}</span><span> ${datas[0].value.open}%</span>
                </div>
                <div style='color:#6ccca6'>
                  发明授权<span style='margin: 0 10px 0 15px'> ${datas[0].value.发明授权}</span><span> ${datas[0].value.auth}%</span>
                </div>
                <div style='color:#e9cf18'>
                  实新授权<span style='margin: 0 10px 0 15px'> ${datas[0].value.实新授权}</span><span> ${datas[0].value.news}%</span>
                </div>
                <div style='color:#7f6eee'>
                  外观授权<span style='margin: 0 10px 0 15px'> ${datas[0].value.外观授权}</span><span> ${datas[0].value.apper}%</span>
                </div>
              `
            } else {
              res = `
              <div style='color:#6ccca6'>
                  ${datas[0].name}${datas[0].seriesName}<span style='margin: 0 10px 0 15px'> ${datas[0].data}
              </div>
              `
            }

            return res;
          }
        },

        backgroundColor: '', //设置无背景色
        grid: { // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '发明公开': true,
            '发明授权': true,
            '实新授权': true,
            '外观授权': true,
            '总体占比': true
          }
        },
        dataset: {
          // dimensions: dimensions,
          source: dataList
        },
        xAxis: {
          type: 'category',
          data: dimensions,
        },
        yAxis: {
          splitLine: { //不显示分割线
            show: false
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#0867ff',
            },
          },
          {
            type: 'bar',
            itemStyle: {
              color: '#68cfaa',
            },
          },
          {
            type: 'bar',
            itemStyle: {
              color: '#ecd419',
            },
          },
          {
            type: 'bar',
            itemStyle: {
              color: '#7c6ef0',
            },
          },
          // {
          //   name: '总体占比',
          //   data: list,
          //   // data: [12, 14, 23, 1220, 12, 16],
          //   type: 'line',
          //   symbol: 'circle',//拐点样式
          //   symbolSize: 9,//拐点大小
          //   itemStyle: {
          //     normal: {
          //       lineStyle: {
          //         width: 2,//折线宽度
          //         color: "#FF0000"//折线颜色
          //       },
          //       color: 'red',//拐点颜色
          //       borderColor: '#FF0000',//拐点边框颜色
          //       borderWidth: 0//拐点边框大小
          //     },
          //     emphasis: {
          //       color: '#FF0000'//hover拐点颜色定义
          //     }
          //   },
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + '';
          //     }
          //   },
          // }
        ]
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
        })
      let type = 1

      //柱状图定时器首次加载
      // this.Histogramtimer = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 4) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true,
      //           '总体占比': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 5) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false,
      //           '总体占比': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 6) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true,
      //           '总体占比': true
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },

    Line(chartDom, lineList, month, type) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        backgroundColor: '', //设置无背景色
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['今年本镇街', '去年本镇街', '今年顺德平均', '去年顺德平均']
        },
        grid: {
          top: "60px",
          left: "30px",
          right: "30px",
          bottom: "20px",
          containLabel: true
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 4,
          itemHeight: 8,
          selected: {
            '今年本镇街': true,
            '去年本镇街': true,
            '今年顺德平均': true,
            '去年顺德平均': true
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month
        },
        yAxis: {
          type: 'value',
          axisLabel: {//不显示坐标轴文字
            // show: false
          },
          splitLine: { //不显示分割线
            show: false
          }
        },
        series: [
          {
            name: '今年本镇街',
            type: 'line',
            stack: 'Total',
            data: lineList[0].data,
            itemStyle: {
              color: '#066afe',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(12, 113, 255,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(12, 113, 255,0.3)'
                }
              ])
            },
          },
          {
            name: '去年本镇街',
            type: 'line',
            stack: 'Total',
            data: lineList[2].data,
            itemStyle: {
              color: '#6bccab',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(111, 208, 172,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(111, 208, 172,0.3)'
                }
              ])
            },
          },
          {
            name: '今年顺德平均',
            type: 'line',
            stack: 'Total',
            data: lineList[1].data,
            itemStyle: {
              color: '#ebcc1e',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(231, 207, 25,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(231, 207, 25,0.3)'
                }
              ])
            },
          },
          {
            name: '去年顺德平均',
            type: 'line',
            stack: 'Total',
            data: lineList[3].data,
            itemStyle: {
              color: '#7a6ee2',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(124, 112, 232,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(124, 112, 232,0.3)'
                }
              ])
            },
          },
        ]
      }
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;

      window.addEventListener("resize", function () {
        myChart.resize();
        })
      // if (type == 1) {
      //   this.LineSetInterval1()
      // } else if (type == 2) {
      //   this.LineSetInterval2()
      // } else if (type == 3) {
      //   this.LineSetInterval3()
      // } else if (type == 4) {
      //   this.LineSetInterval4()
      // }
    },

    gauge(chartDom, data) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        title: {
          zlevel: 1,
        },
        backgroundColor: '',
        series: [
          {
            radius: '90%',
            type: 'gauge',
            center: ['50%', '58%'],
            startAngle: data.startAngle,
            endAngle: data.endAngle,
            min: data.min,
            max: data.max,
            splitNumber: data.splitNumber,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(0, 215, 252,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 153, 249,1)'
                }
              ])
            },
            progress: {
              show: true,
              width: data.progress.width,//进度条宽度
              roundCap: true,
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: data.axisLine.lineStyle.width,
                color: [[1, '#cac9ca']],
                opacity: data.axisLine.lineStyle.opacity//全部进度条
              }
            },
            axisTick: data.axisTick,
            splitLine: data.splitLine,
            axisLabel: data.axisLabel,
            anchor: {
              show: false
            },
            title: {
              show: true
            },
            detail: data.detail,
            data: data.data
          }
        ]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
        })
    }
  },
  //组件销毁时清除定时器
  beforeDestroy() {
    this.LineMousemove1()
    this.LineMousemove2()
    this.LineMousemove3()
    this.LineMousemove4()
    this.HistogramMousemove()
  }
};
</script>

<style scoped lang="less">
@import url("../../../styles/el-popper.css");

.el-dropdown-menu {
  background-color: #0e1941;
  border: #0e1941 solid 1px;

  min-width: 120px;
  position: absolute !important;
  top: 20px !important;
  left: -45px !important;

  .el-dropdown-menu__item {
    color: #4995F4 !important;
  }

  .el-dropdown-menu__item:hover {
    color: #68D8FE !important;
    background-color: #28293f !important;
  }

}

.switch {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 100px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.switch_switch1 {
  // right: 120px;
  background-color: #0f1b47;
}

.switch_switch2 {
  // right: 120px;
  background-color: #22dbdb;
  color: #0f1b47;
  border: 1px solid #0f1b47;
}

.Fullscreen {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.return {
  color: #fff;
  position: absolute;
  top: 65px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  margin-left: 0;
}

.off {
  color: #fff;
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.off_new {
  left: 100px;
  zoom: var(--zoom);
}

.diqu {
  // min-width: 1920px;
  overflow: hidden;
  min-height: 100vh;
  background: #111129;
  padding: 0 28px;

  .top_title {
    padding-top: 14px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    width: 100%;
    height: 8vh;
    background: url(../../../assets/web/top_k.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    line-height: 76%;
    zoom: var(--zoom);

    .top_title_Small {
      font-size: 14px;
      font-weight: initial;
    }
  }

  .left_box_t {
    position: relative;
    width: 100%;
    height: 23.5%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;

    .left_text {
      position: absolute;
      top: 14px;
      left: 8px;
      font-size: 18px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .zho_box_t {
    position: relative;
    width: 100%;
    height: 74%;
    background: url(../../../assets/web/jie_z_s.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    padding: 26px 30px 28px 30px;
    color: #fff;
    overflow: hidden;

    .change_t {
      height: 64%;
      position: relative;
      top: -18px;
      z-index: 9;

      .change_t_gauge {
        height: 100%;
        width: 75%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
      }

      .change_t_gauge1 {
        height: 40%;
        width: 20%;
        position: absolute;
        right: 0;
        top: 64%;
      }

      .change_t_gauge2 {
        height: 40%;
        width: 20%;
        position: absolute;
        top: 64%;
      }

      .add_text {
        position: absolute;
        top: 60%;
        left: 50%;
        font-size: 20px;
        color: #fff;
        text-align: center;
        transform: translate(-50%, 00%);
        z-index: 9;
        line-height: initial;
        zoom: var(--zoom);
      }

    }

    .gauge_bgc {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: -1;
      top: 8%;
      zoom: var(--zoom);

      div:nth-child(1) {
        width: 640px;
        height: 662px;
        border-radius: 50%;
        background: rgba(18, 47, 121, 0.2);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      div:nth-child(2) {
        width: 538px;
        height: 554px;
        border-radius: 50%;
        background: rgba(18, 47, 121, 0.4);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      div:nth-child(3) {
        width: 436px;
        height: 455px;
        border-radius: 50%;
        background: rgba(18, 47, 121, 0.6);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      div:nth-child(4) {
        width: 334px;
        height: 364px;
        border-radius: 50%;
        background: rgba(18, 47, 121, 0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      div:nth-child(5) {
        width: 244px;
        height: 255px;
        border-radius: 50%;
        //渐变色
        background: linear-gradient(to bottom, rgba(1, 108, 210, 1), rgba(2, 183, 245, 1), rgba(1, 108, 210, 1), );
        // background: #00b5f3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .change_b {
      z-index: 9;
      position: absolute;
      left: 20px;
      right: 20px;
      // top: 62%;
      height: 32%;
      zoom: var(--zoom);

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .change_b_item {
            margin-top: 11px;
            font-size: 11px;
            text-align: center;
            height: 100%;
            background-color: #0F1B47;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            line-height: initial;

            .item_t {
              span {
                background-color: #1B3182;
                border-radius: 5px;
                color: #28FEFE;
                font-size: 10px;
                padding: 4px 12px 3px 12px;
                display: inline-block;
              }
            }

            .item_z {
              .z_t {
                font-size: 22px;
              }

              .z_b {
                font-size: 13px;
                color: #59A3FF;
                position: relative;
              }

              .z_b::before {
                content: '';
                display: inline-block;
                width: 5px;
                height: 12px;
                border-radius: 3px;
                background-color: var(--bgColor);
                margin-right: 5px;
                vertical-align: middle;
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translate(-35px, -50%);
              }
            }

            .item_b {
              .el-row {
                padding: 0 5px;

                .el-col {
                  .one_div {
                    background-color: #1B3182;
                    color: #52FFFF;
                    border-radius: 5px;
                    padding: 8px 2px;
                    font-size: 9px;

                    .state {
                      display: flex;
                      justify-content: center;

                      i {
                        font-size: 11px;
                        font-weight: bold;
                      }

                      .span_typeTop {
                        color: #FF4439;
                      }

                      .span_typebot {
                        color: #40FFAF;
                      }

                      .icon_bottom {
                        display: inline-block;
                        transform: rotate(180deg);
                      }
                    }

                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .zho_box_b {
    width: 100%;
    height: 23.5%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    position: relative;

    .zho_box_b_bar {
      width: 100%;
      height: 100%;
    }

    .left_text {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }

  }


  .right_box_z {
    width: 100%;
    height: 60%;
    background: url(../../../assets/web/jie_z_s.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;
    color: #fff;
    padding: 47px 22px 0;

    .companyType {
      display: flex;

      .el-dropdown-link {
        color: #4995F4 !important;
        border: #4995F4 1px solid;
        display: inline-block;
        padding: 3px 5px;
        border-radius: 4px;
      }
    }

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      zoom: var(--zoom);
    }

    .right_text {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 20px;

      .text_1 {
        color: #68D8FE !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        color: #4995F4;
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    // .right_text {
    //   margin-bottom: 15px;
    //   font-size: 14px;
    //   zoom: var(--zoom);

    //   .text_1 {
    //     color: #fff !important;
    //   }

    //   .text_2 {
    //     color: #4995F4;
    //     margin: 0 5px;
    //     cursor: pointer;
    //   }
    // }

    // .box_z_item_amin {
    //   overflow: hidden;
    //   height: 90%;
    //   .scroll_box {
    //     height: 100%;
    //     width: 104%;
    //     overflow: scroll;
    //     overflow-x: hidden;

    //     .box_z_item_red {
    //       color: #d93c33 !important;
    //     }

    //     .box_z_item {
    //       display: flex;
    //       font-size: 14px;
    //       padding: 6px 0;
    //       color: #4B98F7;
    //       zoom: var(--zoom);

    //       div {
    //         line-height: 23px;
    //       }

    //       //第一个div子元素
    //       div:nth-child(1) {
    //         flex: 10%;
    //         text-align: center;
    //       }

    //       div:nth-child(2) {
    //         flex: 15%;
    //         text-align: left;
    //         line-height: inherit;

    //         span {
    //           display: inline-block;
    //           border: 1px solid #4B98F7;
    //           padding: 4px 8px;
    //           margin-top: 1px;
    //           border-radius: 5px;
    //         }
    //       }

    //       div:nth-child(3) {
    //         flex: 60%;
    //         text-align: left;

    //         span {
    //           line-height: inherit;
    //           border: 1px solid #ff4439;
    //           color: #fff;
    //           background-color: #ff4439;
    //           padding: 0px 8px;
    //           border-radius: 5px;
    //           margin-left: 10px;
    //           display: inline-block;
    //         }
    //       }

    //       .div_new {
    //         color: #ff4439;
    //       }

    //       div:nth-child(4) {
    //         flex: 10%;
    //         text-align: center;
    //       }
    //     }
    //   }
    // }

    .box_z_item_amin {
      overflow: hidden;
      height: 100%;

      .scroll_box {
        height: 90%;
        overflow: scroll;
        width: 105%;
        overflow-x: auto;
      }

      .box_z_item {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4B98F7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }



        .span_typebot {
          color: #00D9FC;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }

        .span_typeTop {
          color: #FF4439;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }
      }

      .box_z_itemTop {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4B98F7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }
      }
    }

    .box_z_item:hover {
      color: #68D8FE !important;
      background-color: #28293f !important;
    }

  }


  .right_box_b {
    width: 100%;
    height: 36.5%;
    background: url(../../../assets/web/jie_z_s.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;
    padding: 48px 0 0 0;

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }

    .right_box_nei_admin {
      overflow: hidden;
      height: 90%;

      .right_box_nei_scroll {
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        width: 104%;

        .right_box_nei {
          display: flex;
          color: #4B98F7;
          font-size: 14px;
          padding: 10px 15px;
          position: relative;
          transition: 1s color;
          zoom: var(--zoom);

          @keyframes mymove {
            1% {
              opacity: 0;
            }

            70% {
              opacity: 0;
            }

            99% {
              opacity: 0.2;
            }

            100% {
              opacity: 1;
              right: 2px;
            }
          }

          div:nth-child(1) {
            flex: 20%;
            text-align: center;

            span {
              border: 1px solid #4B98F7;
              border-radius: 5px;
              display: inline;
              padding: 0px 8px;
            }
          }

          div:nth-child(2) {
            flex: 60%;
            text-align: left;
          }

          div:nth-child(3) {
            flex: 30%;
            text-align: center;
          }

          .nei_tooltip {
            position: absolute;
            background-color: #0f1941;
            width: 200px;
            top: -55px;
            right: -3px;
            padding: 5px;
            opacity: 0;
            animation-timing-function: infinite;
            transition: .5s opacity ease;
            pointer-events: none;



            div {
              text-align: left !important;
              font-size: 10px;
              color: #fff;
            }
          }
        }

        .right_box_nei:hover {
          background-color: rgba(40, 41, 62, 0.5) !important;
          color: #52FFFF;
          cursor: pointer;


          .nei_tooltip {
            opacity: 1;
            // animation-fill-mode: forwards;
            // animation-name: mymove;
            // animation-:duration: .5s;


            /*Safari 和 Chrome:*/
            // -webkit-animation: mymove .3s infinite;
            // animation-fill-mode: forwards;

          }
        }
      }
    }




  }
}



@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
